<!-- subpkg_medicine/payment/index.vue -->
<script setup>
	import { ref } from 'vue'
	import { addressListApi } from '@/services/address.js'
	import { createOrderApi, preOrderApi } from '@/services/medicine.js'
	import { orderPayApi } from '@/services/payment.js'
	const props = defineProps({
		id: String,
	})
	const paymentRef = ref()
	const addressInfo = ref({})
	const getAddressList = async () => {
		const { code, data, message } = await addressListApi()
		if (code !== 10000) return uni.utils.toast(message)
		addressInfo.value = data[0]
	}
	getAddressList()
	const preOrderInfo = ref({})
	const createPreOrder = async () => {
		const { code, data, message } = await preOrderApi(props.id)
		if (code !== 10000) return uni.utils.toast(message)
		preOrderInfo.value = data
	}
	createPreOrder()
	const orderId = ref('')
	const onPaymentButtonClick = async () => {
		const { code, data, message } = await createOrderApi(
			props.id,
			addressInfo.value.id
		)
		if (code !== 10000) return uni.utils.toast(message)
		orderId.value = data.id
		paymentRef.value.open()
	}
	const onPaymentClose = () => {
		paymentRef.value.close()
	}
	const onPaymentConfirm = async ({ index }) => {
		if (index === 0) return uni.utils.toast('暂不支持微信支付！')
		const { code, data, message } = await orderPayApi({
			paymentMethod: index,
			orderId: orderId.value,
			payCallback: 'http://localhost:5173/#/subpkg_medicine/pay_result/index',
		})
		if (code !== 10000) return uni.utils.toast(message)
		// #ifdef H5
		window.location.href = data.pauUrl
		// #endif
		// #ifdef MP-WEIXIN
		// wx.requestPayment()
		// #endif
	}
</script>

<template>
	<scroll-page background-color="#f6f6f6">
		<view class="medicine-page">
			<view class="page-header">
				<view class="order-shippment">
					<view class="region">
						<uni-icons size="16" color="#FF7702" type="location-filled" />
						{{ addressInfo.city }}{{ addressInfo.county }}
					</view>
					<view class="detail">{{ addressInfo.addressDetail }}</view>
					<view class="receiver">
						{{ addressInfo.receiver }} {{ addressInfo.mobile }}
					</view>
				</view>
			</view>

			<view class="order-shop">
				优医药房
				<text class="alt">优医质保 假一赔十</text>
			</view>
			<!-- 药品列表 -->
			<view class="medicine-list">
				<view
					v-for="medicine in preOrderInfo.medicines"
					:key="medicine.id"
					class="medicine-list-item"
				>
					<image
						class="medicine-cover"
						src="/static/uploads/medicine-1.jpg"
						mode="aspectFill"
					/>
					<view class="medicine-info">
						<text class="name">{{ medicine.name }}</text>
						<text
							class="unit"
							:class="{ symbol: medicine.prescriptionFlag === 1 }"
						>
							{{ medicine.specs }}
						</text>
						<text class="price">¥{{ medicine.amount }}</text>
					</view>
					<view class="quantity">x{{ medicine.quantity }}</view>
					<view class="guide">用法用量：{{ medicine.usageDosag }}</view>
				</view>
				<!-- <view class="medicine-list-item">
					<image
						class="medicine-cover"
						src="/static/uploads/medicine-2.jpg"
						mode="aspectFill"
					/>
					<view class="medicine-info">
						<text class="name">瑞巴派特片</text>
						<text class="unit symbol">24片</text>
						<text class="price">¥25.00</text>
					</view>
					<view class="quantity">x1</view>
					<view class="guide">用法用量：口服，每次1袋，每天3次，用药3天</view>
				</view> -->
			</view>

			<!-- 订单信息 -->
			<view class="order-info">
				<uni-list :border="false">
					<uni-list-item
						title="药品金额"
						:right-text="`¥${preOrderInfo.payment}`"
					/>
					<uni-list-item
						title="运费"
						:right-text="`¥${preOrderInfo.expressFee}`"
					/>
					<uni-list-item
						title="优惠券"
						show-arrow
						:right-text="`-¥${preOrderInfo.couponDeduction}`"
					/>
					<uni-list-item
						title="实付款"
						:right-text="`¥${preOrderInfo.actualPayment}`"
					/>
				</uni-list>
			</view>

			<!-- 底部 -->
			<view class="toolbar">
				<view class="total-amount">
					需付款: <text class="number">¥{{ preOrderInfo.actualPayment }}</text>
				</view>
				<view class="buttons">
					<button class="uni-button" @click="onPaymentButtonClick">
						立即支付
					</button>
				</view>
			</view>
		</view>
	</scroll-page>
	<custom-payment
		ref="paymentRef"
		:order-id="''"
		:amount="preOrderInfo.actualPayment"
		@close="onPaymentClose"
		@confirm="onPaymentConfirm"
	></custom-payment>
</template>

<style lang="scss">
	@import './index.scss';
</style>
